<!--
 * @Date: 2020-07-11 15:54:57
 * @LastEditors: leehave
 * @LastEditTime: 2020-09-14 17:04:21
--> 
<template>
  <div class="user-wrapper ucenter user-with-tab">
    <div class="ucenter-wrapper" :style="`background-image:url(${staticPath}/gerenzhongxin_bg@2x.png)`" >
      <div class="ucenter-flex" @click="resetPhone">
        <div class="avatar">
          <van-image :src="userInfo.photo" round width="50" height="50"></van-image>
        </div>
        <div class="info">
          <div class="name">{{userInfo.username}}</div>
          <div class="phone">{{userInfo.tel}}</div>
        </div>
        <van-icon name="arrow" color="#fff"/>
      </div>
    </div>

    <div class="entry-wrapper">
      <div class="user-panel">
        <van-cell title="我的订单" is-link value="全部订单" :border="false" to="/user/order/index" />
        <van-grid :column-num="6" :border="false" icon-size="36px">
          <van-grid-item :icon="`${staticPath}/icon_daifukuan@2x.png`" text="待付款" to="/user/order/index?active=1" />
          <van-grid-item :icon="`${staticPath}/icon_daiqueren@2x.png`" text="待确认" to="/user/order/index?active=3" />
          <van-grid-item :icon="`${staticPath}/icon_yiqueren@2x.png`" text="已确认" to="/user/order/index?active=5" />
          <van-grid-item :icon="`${staticPath}/icon_yishangmen@2x.png`" text="已上门" to="/user/order/index?active=9" />
          <van-grid-item :icon="`${staticPath}/icon_yiwanchen@2x.png`" text="已完成" to="/user/order/index?active=13" />
          <van-grid-item :icon="`${staticPath}/icon_yiquxiao@2x.png`" text="已取消" to="/user/order/index?active=7" />
        </van-grid>
      </div>
    </div>
    <div class="vistor">
      <van-cell :icon="`${staticPath}/icon_shenfen@2x.png`" title="就诊者管理" is-link to="/user/office/index" value="" />
      <van-cell :icon="`${staticPath}/icon_yuyue@2x.png`" title="我的预约" is-link to="/user/subscribe/index" value="" />
      <van-cell :icon="`${staticPath}/icon_dizhi@2x.png`" title="地址管理" is-link to="/user/address/index" value="" />
      <van-cell :icon="`${staticPath}/icon_jianui@2x.png`" to="/user/feedback" title="建议反馈" is-link value="" />
      <van-cell :icon="`${staticPath}/icon_fuwu@2x.png`" title="服务中心" is-link v-if="appInfo.landline" :value="appInfo.landline.value" @click="callTel(appInfo.landline.value)" />
    </div>

    <van-button class="login-out" block v-if="userInfo" @click="loginout">退出登录</van-button>
    <footTab></footTab>
  </div>
</template>

<script>
import footTab from "@/components/footerTab/index";
import staticPath from "@/assets/json/index";
import { mapGetters,mapState } from "vuex";
import { getUserInfo } from "@/service/user";
export default {
  data() {
    return {
      callPhone: false,
      staticPath: process.env.VUE_APP_STATIC_PATH,
    };
  },
  computed: {
    // ...mapGetters(["userInfo","appInfo"])
    ...mapGetters(["userInfo", "appInfo", "token"]),
  },
  created() {
    if (this.token) {
      this.queryUserInfo()
      this.$store.dispatch("app/setAppInfoAction", {});
    }
  },
  mounted() {
    
  },
  watch: {
    // 'userInfo': function(oldVal,newVal){
    //   if(!newVal.hasOwnProperty('openId') && newVal.openId !== undefined){
    //     console.log(oldVal,newVal,'watch userInfo')
    //     this.queryUserInfo(newVal.openId)
    //     this.$store.dispatch('user/setLoginStatus', 0)
    //   }
    // }
  },
  methods: {
    callTel(tel){
      console.log(tel,'claasl')
      window.location.href = "tel:"+tel;
    },
    queryUserInfo(){
      this.$store.dispatch('user/updateUserInfo') 
      // Object.keys(this.userInfo).length > 0
      // ? this.$store.dispatch('user/updateUserInfo') 
      // : this.$store.dispatch('user/fedLogOut')
    },
    decodeName(name) {
      return decodeURI(name);
    },
    directPath(item) {
      if(item.opentype == 'phone'){
        this.callPhone = true
      }else if(item.jumptype == 3){
        this.$toast('功能尚在开发中~')
        return
      }else{
        this.$router.push({
          path: item.path,
        });
      }
    },
    contactUs(){
      
    },
    noticeClose(){
      this.callPhone = false
    },
    loginout(){
      this.$store.dispatch('user/fedLogOut')
    },
    // 重置手机号
    resetPhone(){
      this.$router.push({
        path: '/user/info'
      })
    }
  },
  components: {
    footTab,
  },
};
</script>

<style lang="less">
.ucenter {
  background: #f2f2f2;
  height: 100vh;
}
.user-with-tab{
  padding-bottom: 60px;
}
.ucenter .ucenter-wrapper {
  position: relative;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
  height: 150px;
}

.ucenter .ucenter-wrapper .ucenter-flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 110px;
  padding: 0 15px;
}
.ucenter .phone {
  font-size: 14px;
  margin-top: 10px;
}
.ucenter .ucenter-wrapper .avatar {
  width: 50px;
  height: 50px;
  margin-right: 15px;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.6);
}

.ucenter .ucenter-wrapper .avatar image {
  width: 18px;
  height: 23px;
}

.ucenter .van-grid-item__text .text {
  font-size: 14px;
  margin-top: 4px;
}

.ucenter .ucenter-wrapper .info {
  color: #fff;
  font-size: 16px;
  flex: 1;
}
.login-out{
  margin-top: 6px;
  color: #FF2400;
  margin-bottom: 50px;
}
.ucenter .suspension {
  width: 350px;
  height: 115px;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);
  background-size: 100% 100%;
  z-index: 2;
  align-items: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .van-grid{
    flex: 1;
  }
}

.ucenter .suspension .num {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 12px;
}
.suspension{
  .van-grid-item{
    .van-grid-item__content{
      background: transparent;
      &::after{
        border: none;
        border-width: 0;
      }
    }
  }
  .van-hairline--top::after{
    border: none;
  }
}

.entry-wrapper {
  position: relative;
  margin-top: -15px;
  .van-cell{
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    padding-top: 15px;
    padding-bottom: 15px;
    background: #fff;
    .van-cell__title{
      font-size: 16px;
      color: #000;
    }
  }
}
.vistor{
  background: #fff;
  .van-cell{
    padding-top: 12px;
    padding-bottom: 12px;
    background: #fff;
    .van-cell__left-icon{
      margin-right: 12px;
      font-size: 20px;
      height: 20px;
    }
  }
}
.entry-wrapper .van-grid-item {
  margin-bottom: 10px;
  .van-grid-item__content{
    background: #fff;
  }
}

.entry-wrapper .van-grid-item .van-hairline--surround:after {
  border-width: 0;
}

.notice-dialog .van-dialog__content {
  // background-image: url(https://www.henankejue.com/static/wxapp/kefu.png);
  background-position: top;
  padding: 100px 0 0;
  background-repeat: no-repeat;
  background-size: contain;
}
.notice-dialog .van-dialog__content .notice {
  padding: 20px;
  text-align: center;
  font-size: 14px;
  background: #fff;
}
.notice-dialog .van-dialog__content .notice .title {
  font-size: 16px;
  margin-bottom: 15px;
}
.forbidden{
  opacity: 0.6;
}
</style>
